<template>
  <div>
    <div class="mi-process-task flex">
      <!-- 左侧部门（流程任务状态） -->
      <div class="mi-process-task-left white">
        <!-- 待办任务 -->
        <div :class="falgtodo ? 'left-items flex1 background': 'left-items flex1'" @click="getToDo('todo')">
          <div class="left1 iconfont"><img src="../../assets/flowlist/todos.png"></div>
          <div :class="falgtodo ? 'middle1 icon-hover title': 'middle1 title'">待办任务</div>
          <div class="right1"><div class="weizhi" v-show='total1>0' >{{total1}}</div></div>
        </div>
        <!-- 我的传阅 -->
        <div :class="falgread ? 'left-items flex1 background': 'left-items flex1'" @click="getToDo('read')">
          <div class="left1 iconfont"><img src="../../assets/flowlist/read.png"></div>
          <div :class="falgread ? 'middle1 icon-hover title': 'middle1 title'">我的传阅</div>
          <div class="right1"><div class="weizhi" v-show="manualTaskTotal > 0">{{manualTaskTotal}}</div></div>
        </div>
        <!-- 发起流程 -->
        <div :class="falgflow ? 'left-items flex1 background': 'left-items flex1'" @click="getToDo('flow')">
          <div class="left1 iconfont"><img src="../../assets/flowlist/flows.png"></div>
          <div :class="falgflow ? 'middle1 icon-hover title': 'middle1 title'">发起流程</div>
          <div class="right1"><div class="weizhi1"></div></div>
        </div>
        <!-- 已办任务 -->
        <div :class="falgdone ? 'left-items flex1 background': 'left-items flex1'" @click="getToDo('done')">
          <div class="left1 iconfont"><img src="../../assets/flowlist/done.png"></div>
          <div :class="falgdone ? 'middle1 icon-hover title': 'middle1 title'">已办任务</div>
          <div class="right1"><div class="weizhi1"></div></div>
        </div>
        <!-- 我的流程 -->
        <div :class="falgmyflow ? 'left-items flex1 background': 'left-items flex1'" @click="getToDo('myflow')">
          <div class="left1 iconfont"><img src="../../assets/flowlist/myflow.png"></div>
          <div :class="falgmyflow ? 'middle1 icon-hover title': 'middle1 title'">我的流程</div>
          <div class="right1"><div class="weizhi1"></div></div>
        </div>
        <!-- 草稿箱 -->
        <div v-if="falgFlase" :class="falgdrafts ? 'left-items flex1 background': 'left-items flex1'" @click="getToDo('drafts')">
          <div class="left1 iconfont"><img src="../../assets/flowlist/drafts.png"></div>
          <div :class="falgdrafts ? 'middle1 icon-hover title': 'middle1 title'">草稿箱</div>
          <div class="right1"><div class="weizhi1"></div></div>
        </div>
        <!-- 回收站 -->
        <div :class="falgrecycle ? 'left-items flex1 background': 'left-items flex1'" @click="getToDo('recycle')">
          <div class="left1 iconfont"><img src="../../assets/flowlist/recycle.png"></div>
          <div :class="falgrecycle ? 'middle1 icon-hover title': 'middle1 title'">回收站</div>
          <div class="right1"><div class="weizhi1"></div></div>
        </div>
      </div>  
      <!-- 中间占位符 -->
      <div class="mi-process-task-middle"></div>
      <!-- 右侧内容区域 -->
      <div class="mi-process-task-right white">
        <div class="mi-search">
          <div class="flex2">
            <!-- 时间范围 -->
            <div class="mi-search-items marginright24 flex">
              <div class="search-title">时间范围：</div>
              <div class="block search-title-duration">
                <el-date-picker class="duration" 
                    v-model="durationTime" 
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetimerange"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    :default-time="['00:00:00']">
                </el-date-picker>
              </div>
            </div>
            <!-- 状态选择 -->
            <div class="mi-search-items marginright24 flex">
              <div class="search-title">审批状态：</div>
              <el-select class="duration" @change="selectStatus" v-model="status" placeholder="请选择状态">
                <el-option v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <!-- 审批类型和发起人 -->
            <div class="mi-search-items marginright24 ">
              <el-input class="duration" @keyup.enter.native="search" v-model="keyword" placeholder="请输入发起人或审批类型"></el-input>
            </div>
            <!-- 按钮 -->
            <div class="mi-search-items marginright48 ">
              <el-button @click="search" size="small" type="primary" icon="el-icon-search">搜索</el-button>
              <el-button @click="reset" size="small" icon="el-icon-reset">重置</el-button>
            </div>
          </div>
        </div>
        <div v-loading="loading">
          <div id="scroll-view" class="scroll-view" v-if="listData.length > 0">
            <div v-for="(item,index) in listData" :key="index" class="list-item">
              <!-- 头像 -->
              <div class="list-item-left">
                <div class="lsit-header">
                  <img v-if="item.startUserHeadIcon" :src="item.startUserHeadIcon" >
                  <img v-else src="../../assets/flowlist/mi-header.png">
                </div>
              </div>
              <div class="list-item-right">
                <!-- 草稿箱 -->
                <div class="titles flex_1" v-if="falgdrafts">
                  <div class="titles1">{{item.createUserName}}提交的{{item.schemeinfoName}} </div>
                  <div class="refuseing" v-if="item.status==0">审批拒绝</div>
                  <div class="agreeing" v-else-if="item.status==1">审批通过</div>
                  <div class="processing" v-else-if="item.status==3">审批中</div>
                </div>
                <!-- 审批状态 -->
                <div class="titles flex_1" v-else>
                  <div class="titles1">{{item.startUser}}提交的{{item.schemeName}} </div>
                  <div class="refuseing" v-if="item.status==0">审批拒绝</div>
                  <div class="agreeing" v-else-if="item.status==1">审批通过</div>
                  <div class="processing" v-else-if="item.status==3">审批中</div>
                </div>
                <!-- 表单配置项 -->
                <div class="middle-content" @click="toDetails(item)">
                  <!-- 列表、字段 --><!-- is_list==1、type==10、enable_show_condition==0 -->
                  <div v-if="item.showFileds">
                    <div v-for="(value,number) in item.showFileds" :key="number">
                      <span class="title-text" 
                        v-if="value.is_list == 1 && 
                                value.type == 10 && 
                                !value.pid &&
                                value.enable_show_condition==0 && 
                                item.data && 
                                item.data[value.filed_key]">
                        {{value.file_title}}:
                        <span class="color-black">{{item.data[value.filed_key]}}</span>
                      </span>
                    </div>
                  </div>
                  <!-- 列表、字段 --><!-- is_list==1、type==10、enable_show_condition==1 -->
                  <div v-if="item.showFileds">
                    <div v-for="(value,number) in item.showFileds" :key="number">
                      <span class="title-text" 
                        v-if="value.is_list == 1 && 
                                value.type == 10 && 
                                !value.pid &&
                                value.enable_show_condition==1 && 
                                value.condition_column_value.includes(item.data[value.condition_column_name]) &&
                                item.data && 
                                item.data[value.filed_key]">
                        {{value.file_title}}:
                        <span class="color-black">{{item.data[value.filed_key]}}</span>
                      </span>
                    </div>
                  </div>
                  <!-- 列表、表格 -->
                  <div v-if="item.showFileds">
                    <div v-for="(value,number) in item.showFileds" :key="number">
                      <div class="title-text" >
                        <div v-if="value.type == 30 && value.children && value.is_list == 1">
                          <div v-for="(item11,indexs) in value.children" :key="indexs">
                            <div v-if="item.data[value.filed_key] && item.data[value.filed_key].length > 0">
                              <div class="itemsss1">{{item11.file_title}}</div>
                              <div class="itemsss1 color-black1" v-for="(item123,index123) in item.data[value.filed_key]" :key="index123">
                                {{item123[item11.filed_key] ? item123[item11.filed_key]:'-'}} 
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 按钮信息 代办任务 -->
                <div class="middle-button" v-show="falgtodo">
                  <el-button type="primary" @click="toDoAgreeList(item)" :loading="agree1" plain>{{agree1?'加载中':'同意'}}</el-button>
                  <el-button type="danger" @click="toRefuseList(item)" :loading="disagree1" plain>{{disagree1?'加载中':'拒绝'}}</el-button>
                </div>
                <!-- 按钮信息 已办任务 -->
                <div class="middle-button" v-show="falgdone">
                  <el-button type="danger" :loading="withDrawGlag" :disabled="!item.canRevoke" @click="withdraw(item)" plain>撤回审批</el-button>
                </div>
                <!-- 按钮信息 我的流程 -->
                <div class="middle-button" v-show="falgmyflow">
                  <el-button type="danger" :disabled="!item.canRecly" :loading="recycle1" @click="handleRecycle(item)" plain>{{recycle1?'加载中':'撤回申请'}}</el-button>
                </div>
                <!-- 按钮信息 草稿箱 -->
                <div class="middle-button" v-show="falgdrafts">
                  <!-- <el-button type="primary" plain>编辑</el-button> -->
                  <el-button type="danger" :loading="draftsFlag" @click="handleDrafts(item)" plain>删除</el-button>
                </div>
                <!-- 按钮信息 回收站 -->
                <div class="middle-button" v-show="falgrecycle">
                  <el-button type="primary" @click="relaunch(item)" plain>重新发起</el-button>
                  <el-button type="danger" :loading="recyFlag" @click="handleDelRecy(item)" plain>删除</el-button>
                </div>
              </div>
            </div>
          </div>
          <div class="main-no-data" v-else>
            <img src="../../assets/flowlist/no-data.png">
          </div>
        </div>
        <!-- 分页 -->
        <div class="el-pagation" v-if="listData.length > 0">
            <el-pagination
              class="el-pagation-box"
              background
              layout="total,prev,pager,next,jumper"
              :total="total"
              :page-size="size"
              @current-change="handleCurrentChange"
              >
            </el-pagination>
        </div>
        
      </div>
    </div>
    <!-- 返回顶部 -->
    <div class="back-top" @click="backTop">
      <div class="back-top1"><img src="../../assets/flowlist/backtop.png"></div>
      <div class="back-title">返回顶部</div>
    </div>
    <!-- 右侧抽屉 -->
    <el-drawer
      title="查看详情"
      :visible.sync="drawer"
      :direction="direction"
      size="780px"
      :before-close="handleClose">
      <div class="el-drawer">
        <div class="el-drawer-top">
          <!-- tab选项卡 -->
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane  label="详情信息" name="approvalDetails"></el-tab-pane>
            <el-tab-pane label="发起人附件" name="attachment"></el-tab-pane>
          </el-tabs>
        </div>
        <!-- 详情信息 -->
        <div class="el-tabs-left" v-if="firstFlag">
          <div class="approval-code">
            <div class="approval-code-left">审批编码：{{approvalDetail.serialNumber}}</div>
            <div class="approval-code-right">
              <div class="prints" @click="setCirculate">
                <div class="dayin-1"><img src="../../assets/flowlist/circulate.png"></div>
                传阅
              </div>
              <div class="dayin" @click="handlePrint">
                <div class="dayin-1"><img src="../../assets/flowlist/print.png"></div>
                打印
              </div>
            </div>
          </div>
          <div class="margin40 height124 postionRs">
            <div class="theme">{{approvalDetail.startUser}}提交的{{approvalDetail.schemeName}}</div>
            <div class="company">{{approvalDetail.startUserCompanyName}}</div>
            <div class="approval-status-resufe" v-if="approvalDetail.status==0">审批拒绝</div>
            <div class="approval-status-agree" v-else-if="approvalDetail.status==1">审批通过</div>
            <div class="approval-status-process" v-else>审批中</div>
            <div class="approval-status-watermark">
              <img v-show="approvalDetail.status==1" src="../../assets/flowlist/processed.png">
              <img v-show="approvalDetail.status==0" src="../../assets/flowlist/refused.png">
            </div>
          </div>
          <div class="horizontal-line"></div>
          <!-- 表单详情配置项 -->
          <div class="form-box">
            <!-- 列表、字段 --><!-- is_list==1、type==10、enable_show_condition==0 -->
            <div v-if="approvalDetail.showFileds">
              <div class="detail-value-box" v-for="(value,number) in approvalDetail.showFileds" :key="number">
                <div v-if="value.type == 10 && 
                          !value.pid &&
                          value.enable_show_condition==0 && 
                          approvalDetail.data && 
                          approvalDetail.data[value.filed_key]">
                          <span class="title-text">{{value.file_title}}</span>
                          <span class="detail-value">{{approvalDetail.data[value.filed_key]}}</span>
                </div>
              </div>
            </div>
            <!-- 列表、字段 --><!-- is_list==1、type==10、enable_show_condition==1 -->
            <div v-if="approvalDetail.showFileds">
              <div class="detail-value-box" v-for="(value,number) in approvalDetail.showFileds" :key="number">
                <div v-if="value.type == 10 && 
                      !value.pid &&
                      value.enable_show_condition==1 && 
                      value.condition_column_value.includes(approvalDetail.data[value.condition_column_name]) &&
                      approvalDetail.data && 
                      approvalDetail.data[value.filed_key]">
                      <span class="title-text">{{value.file_title}}</span>
                      <span class="detail-value">{{approvalDetail.data[value.filed_key]}}</span>
                  </div>
              </div>
            </div>
            <div class="details_line"></div>
            <!-- 文件 -->
            <div v-if="approvalDetail.showFileds">
              <div v-for="(value,number) in approvalDetail.showFileds" :key="number">
                <div v-if="value.type == 50 && !value.pid" >
                  <span class="title-text" v-if="approvalDetail.data[value.filed_key]">{{value.file_title}}:</span>
                  <span class="color-black">{{approvalDetail.data[value.filed_key]}}</span>
                </div>
              </div>
            </div>
            <div class="details_line"></div>
            <!-- 是否展开条件 enable_show_condition=1 type == 40  -->
            <div v-if="approvalDetail.showFileds">
              <div v-for="(value,number) in approvalDetail.showFileds" :key="number">
                <div class="title-text flex111 margintop20" 
                v-if="value.type == 40 && value.enable_show_condition == 1 && 
                value.condition_column_value == approvalDetail.data[value.condition_column_name]" >
                  <div>{{value.file_title}}：</div>
                  <div class="flowName1" :id="approvalDetail.data[value.filed_key]" 
                  v-if="approvalDetail.data[value.filed_key]">
                    {{getFLowName1(approvalDetail.data[value.filed_key])}}
                  </div>
                </div>
              </div>
            </div>
            <div class="details_line"></div>
            <!-- 列表、表格 -->
            <div v-if="approvalDetail.showFileds">
              <div v-for="(value,number) in approvalDetail.showFileds" :key="number">
                <div class="title-text" >
                  <div v-if="value.type == 30 && value.children && value.enable_show_condition == 0">
                    <div v-for="(item11,indexs) in value.children" :key="indexs">
                      <div v-if="approvalDetail.data[value.filed_key] && approvalDetail.data[value.filed_key].length > 0">
                        <div class="itemsss1">{{item11.file_title}}</div>
                        <div class="itemsss1 color-black1" v-for="(item123,index123) in approvalDetail.data[value.filed_key]" :key="index123">
                          <span class="pass11" v-if="item123[item11.filed_key] == '通过'">通过<img class="pass1" src="../../assets/flowlist/pass1.png"></span>
                          <span v-else>{{item123[item11.filed_key] ? item123[item11.filed_key]:'-'}}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="details_line"></div>
            <!-- 列表、表格 -->
            <div v-if="approvalDetail.showFileds">
              <div v-for="(value,number) in approvalDetail.showFileds" :key="number">
                <div class="title-text" >
                  <div v-if="value.type == 30 && value.children && value.enable_show_condition == 1 && value.condition_column_value == approvalDetail.data[value.condition_column_name]">
                    <div v-for="(item11,indexs) in value.children" :key="indexs">
                      <div v-if="approvalDetail.data[value.filed_key] && approvalDetail.data[value.filed_key].length > 0">
                        <div class="itemsss1">{{item11.file_title}}</div>
                        <div class="itemsss1 color-black1" v-for="(item123,index123) in approvalDetail.data[value.filed_key]" :key="index123">
                          <span class="pass11" v-if="item123[item11.filed_key] == '通过'">通过<img class="pass1" src="../../assets/flowlist/pass1.png"></span>
                          <span v-else>{{item123[item11.filed_key] ? item123[item11.filed_key]:'-'}}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="details_line"></div>
            <!--详情、表单 -->
            <div v-if="approvalDetail.showFileds">
              <div v-for="(value,number) in approvalDetail.showFileds" :key="number">
                <div class="title-text" >
                  <div v-if="value.type == 20 && value.children">
                    <div v-for="(item11,indexs) in value.children" :key="indexs">
                        <div class="itemsss1">{{item11.file_title}}</div>
                        <div class="itemsss1 color-black1">
                          {{approvalDetail.data[value.filed_key][item11.filed_key]}}
                        </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="details_line"></div>

            <!-- 流程任务 -->
            <div v-if="approvalDetail.showFileds">
              <div v-for="(value,number) in approvalDetail.showFileds" :key="number">
                <div class="title-text flex111 margintop20" v-if="value.type == 40 && value.enable_show_condition == 0" >
                  <div>{{value.file_title}}：</div>
                  <div class="flowName1" :id="approvalDetail.data[value.filed_key]" v-if="approvalDetail.data[value.filed_key]">
                    {{getFLowName(approvalDetail.data[value.filed_key])}}
                  </div>
                </div>
              </div>
            </div>
            <!-- 流程任务 -->
             <!-- value.condition_column_value.includes(approvalDetail.data[value.condition_column_name]) && -->

            <div v-if="approvalDetail.showFileds">
              <div v-for="(value,number) in approvalDetail.showFileds" :key="number">
                <div class="title-text flex111 margintop20" 
                  v-if="value.type == 40 && 
                    value.enable_show_condition == 1 &&
                    value.condition_column_value.includes(approvalDetail.data[value.condition_column_name])" >
                  <div>{{value.file_title}}：</div>
                  <div class="flowName1" :id="approvalDetail.data[value.filed_key]" v-if="approvalDetail.data[value.filed_key]">
                    {{getFLowName(approvalDetail.data[value.filed_key])}}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 横线 -->
          <div class="horizontal-line"></div>
          <!-- 流转信息 -->
          <div class="c-info-box" v-loading="loading1">
            <div class="c-info-title">流转信息</div>
            <div class="c-info-content" >
              <div class="approval-items" v-for="(item,index) in circulationRecord" :key="index">
                <!-- 第一项 -->
                <div class="bordesssr" v-if="index == 0">
                  <div class="approval-items1">
                    <!-- 发起人头像 -->
                    <div class="faqiren-touxiang">
                      <div class="faqiren-touxiang1">
                        <img v-if="item.startUserHeadIcon" :src="item.startUserHeadIcon">
                        <img v-else src="../../assets/flowlist/mi-header1.png">
                      </div>
                      <div class="faqiren-touxiang2">
                          <img src="../../assets/flowlist/agreeing1.png">
                      </div>
                    </div>
                    <!-- 发起人信息 -->
                    <div class="faqiren-touxiang-right">
                      <div class="faqiren-touxiang-right1" :title="item.startUserId+item.activityName">{{item.startUserId}}（{{item.activityName}}）</div>
                      <div class="agree11 widthpercent30"></div>
                      <div class="faqiren-touxiang-right2">{{item.endTime}}</div>
                    </div>
                  </div>
                  <!-- 发起人附件 -->
                  <div class="approval-items2" v-if="item.taskAttachments && item.taskAttachments.length > 0">
                    <div class="approval-items3" v-for="(item1,index1) in item.taskAttachments" :key="index1">
                      <div class="withheight36" v-if="item1.fileType == 'pdf'"><img src="../../assets/folder/pdf.png"></div>
                      <div class="withheight36" v-else-if="item1.fileType == 'doc' || item1.fileType == 'docx'"><img src="../../assets/folder/word.png"></div>
                      <div class="withheight36" v-else-if="item1.fileType == 'xls' || item1.fileType == 'xlsx'"><img src="../../assets/folder/excel.png"></div>
                      <div class="withheight36" v-else-if="item1.fileType == 'jpg' || item1.fileType == 'png' || item1.fileType == 'jpeg'"><img src="../../assets/flowlist/picture.png"></div>
                      <div class="withheight36" v-else-if="item1.fileType == 'txt'"><img src="../../assets/flowlist/txt.png"></div>
                      <div class="withheight36" v-else><img src="../../assets/flowlist/mi-header.png"></div>
                      <div class="withheight12">
                        <div class="withheight121">{{item1.fileName}}</div>
                        <div class="withheight122">{{(item1.fileSize/1024/1024).toFixed(2)}}kb</div>
                      </div>
                      <div class="withheight11">
                          <el-link type="primary" @click="preview_(item1)">预览</el-link>
                          <el-link type="primary" class="marginleft20" @click="download(item1)">下载</el-link>
                      </div>
                    </div>
                  </div>
                  <div class="approval-items2 height60" v-else></div>
                </div>
                <!-- 第二项 -->
                <div v-else-if="index > 0">
                  <!-- 发起人头像、发起人信息 -->
                  <div class="approval-items1">
                    <!-- 发起人头像 -->
                    <div class="faqiren-touxiang">
                      <div class="faqiren-touxiang1">
                        <img v-if="item.userHeadIcon" :src="item.userHeadIcon">
                        <img v-else src="../../assets/flowlist/mi-header1.png">
                      </div>
                      <div class="faqiren-touxiang2">
                          <img v-if="item.btnValue =='意见'" src="../../assets/flowlist/comments1.png">
                          <img v-else-if="item.btnValue =='同意'" src="../../assets/flowlist/agreeing1.png">
                          <img v-else-if="item.btnValue =='拒绝'" src="../../assets/flowlist/refuseing1.png">
                          <img v-else-if="item.btnValue =='驳回'" src="../../assets/flowlist/refuseing1.png">
                          <img v-else-if="item.btnValue =='撤回'" src="../../assets/flowlist/comments1.png">
                          <img v-else-if="item.btnValue =='' && item.activityType != 'endEvent'" src="../../assets/flowlist/processing1.png">
                          <img v-else-if="item.btnValue =='' && item.activityType == 'endEvent'" src="../../assets/flowlist/agreeing1.png">
                      </div>
                    </div>
                    <!-- 发起人信息 -->
                    <div class="faqiren-touxiang-right">
                      <div class="faqiren-touxiang-right1" :title="item.candidate+item.activityName">{{item.candidate}}（{{item.activityName}}）</div>
                      <div class="refuse11 flex_11" v-if="item.btnValue == '意见'">
                        <div v-if="item.comments">
                          <div v-if="item.comments.length > 0">已评论</div>
                        </div>
                        <div v-if="item.taskAttachments">
                          <div v-if="item.taskAttachments.length > 0">附件上传</div>
                        </div>
                      </div>
                      <div class="refuse111" v-else-if="item.btnValue == '拒绝'">已拒绝</div>
                      <div class="refuse11" v-else-if="item.btnValue == '驳回'">已驳回</div>
                      <div class="agree11" v-else-if="item.btnValue == '同意'">已同意</div>
                      <div class="agree11" v-else-if="item.btnValue == '转办'">已转交</div>
                      <div class="agree11" v-else-if="item.btnValue == '撤回'">已撤回</div>
                      <div class="faqiren-touxiang-right2">{{item.endTime}}</div>
                    </div>
                  </div>
                  <!-- 评论 -->
                  <div v-if="item.comments.length > 0">
                    <div class="approval-items11">
                      <span v-for="(items1,indexs1) in item.comments" :key="indexs1" :title="items1.userName+'添加了评论：'+items1.message">
                        {{items1.message}}
                      </span>
                    </div>
                  </div>
                  <!-- 附件 -->
                  <div class="approval-items2" v-if="item.taskAttachments && item.taskAttachments.length > 0">
                    <div class="approval-items3" v-for="(item2,index1) in item.taskAttachments" :key="index1">
                      <div class="withheight36" v-if="item2.fileType == 'pdf'"><img src="../../assets/folder/pdf.png"></div>
                      <div class="withheight36" v-else-if="item2.fileType == 'doc' || item2.fileType == 'docx'"><img src="../../assets/folder/word.png"></div>
                      <div class="withheight36" v-else-if="item2.fileType == 'xls' || item2.fileType == 'xlsx'"><img src="../../assets/folder/excel.png"></div>
                      <div class="withheight36" v-else-if="item2.fileType == 'jpg' || item2.fileType == 'png' || item2.fileType == 'jpeg'"><img src="../../assets/flowlist/picture.png"></div>
                      <div class="withheight36" v-else-if="item2.fileType == 'txt'"><img src="../../assets/flowlist/txt.png"></div>
                      <div class="withheight36" v-else><img src="../../assets/flowlist/mi-header.png"></div>
                      <div class="withheight12">
                        <div class="withheight121">{{item2.fileName}}</div>
                        <div class="withheight122">{{(item2.fileSize/1024/1024).toFixed(2)}}kb</div>
                      </div>
                      <div class="withheight11">
                          <el-link type="primary" @click="preview_(item2)">预览</el-link>
                          <el-link type="primary" class="marginleft20" @click="download(item2)">下载</el-link>
                      </div>
                    </div>
                  </div>
                  <!-- 附件——空 -->
                  <div class="approval-items2 height60" v-else>
                  </div>
                  <!-- 审批人 -->
                  <div class="approval-items2 margintop60 height60" v-if="index == circulationRecord.length-1">
                    <!-- {{item.candidateInfos}} -->
                    <div class="approval-people" v-if="item.candidateInfos">
                      <div class="approval-people-items" v-for="(i,n) in item.candidateInfos" :key="n">
                        <div class="approval-people-items-top"><img v-if="i.userHeadIcon" :src="i.userHeadIcon"><img v-else src="../../assets/flowlist/mi-header.png"></div>
                        <div class="approval-people-items-bottom">{{i.userName}}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 默认传阅人 -->
              <div class="margintop36" v-if="circulatPeoples">
                <div class="approval-items1">
                  <!-- 发起人头像 -->
                  <div class="faqiren-touxiang">
                    <div class="faqiren-touxiang1">
                      <img src="../../assets/flowlist/mi-header1.png">
                    </div>
                    <div class="faqiren-touxiang2">
                        <!-- <img src="../../assets/flowlist/processing1.png"> -->
                    </div>
                  </div>
                  <!-- 发起人信息 -->
                  <div class="faqiren-touxiang-right">
                    <div class="faqiren-touxiang-right1">默认传阅人（传阅{{circulatPeoples.length}}人）</div>
                  </div>
                </div>
                <div class="approval-items2 marginlef60" v-if="circulatPeoples.length > 0">
                  <div class="approval-items4" v-for="(itemx,index1) in circulatPeoples" :key="index1">
                    <div class="approval-items4-1">
                      <img v-if="itemx.userHeadIcon" :src="itemx.userHeadIcon">
                      <img v-else src="../../assets/flowlist/mi-header.png">
                    </div>
                    <div class="approval-items4-2" :title="itemx.account"> {{itemx.account}}</div>
                  </div>
                </div>
              </div>
              <!-- circulationData -->
              <!-- 手动传阅人 -->
              <div class="margintop36" v-if="circulationData">
                <div class="approval-items1">
                  <!-- 发起人头像 -->
                  <div class="faqiren-touxiang">
                    <div class="faqiren-touxiang1">
                      <img src="../../assets/flowlist/mi-header1.png">
                    </div>
                    <div class="faqiren-touxiang2">
                    </div>
                  </div>
                  <!-- 发起人信息 -->
                  <div class="faqiren-touxiang-right">
                    <div class="faqiren-touxiang-right1 width100">手动添加传阅人（传阅{{circulationData.length}}人）</div>
                  </div>
                </div>
                <div class="approval-items2 marginlef60" v-if="circulationData.length > 0">
                  <div class="approval-items4" v-for="(itemx,index1) in circulationData" :key="index1">
                    <div class="approval-items4-1" :title="itemx.records[0].createUserName+'手动传阅给'+itemx.records[0].userName+'  '+itemx.records[0].createDate">
                      <img v-if="itemx.userHeadIcon" :src="itemx.userHeadIcon">
                      <img v-else src="../../assets/flowlist/mi-header.png">
                    </div>
                    <div class="approval-items4-2" 
                      :title="itemx.records[0].createUserName+'手动传阅给'+itemx.records[0].userName+'  '+itemx.records[0].createDate"> 
                      {{itemx.userName}}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 附件汇总 -->
        <div class="el-tabs-right" v-if="secondFlag">
          <div class="attachment-files">
            <!-- 表头 -->
            <div class="table-header" v-show="enclosure.length > 0">
              <div class="number font-size-body">序号</div>
              <div class="name font-size-body">名称</div>
              <div class="format font-size-body">格式</div>
              <div class="components1 font-size-body">类型</div>
              <div class="upload-time font-size-body">上传时间</div>
              <div class="operate font-size-body">操作</div>
            </div>
            <!-- 表格体 -->
            <div v-if="enclosure.length > 0">
              <div class="table-body" v-for="(item,index) in enclosure" :key="index">
                <div class="number font-size-body">{{index+1}}</div>
                <div class="name font-size-body" :title="item.fileName">{{item.fileName}}</div>
                <div class="format font-size-body">{{item.fileType}}</div>
                <div class="components1 font-size-body">{{item.fieldsName}}</div>
                <div class="upload-time font-size-body" :title="item.createTime">{{item.createTime}}</div>
                <div class="operate font-size-body">
                  <el-link type="primary" @click="preview1(item)">预览</el-link>&nbsp;&nbsp;
                  <el-link type="primary" @click="download1(item)">下载</el-link>
                </div>
              </div>
            </div>
            <div class="el-drawer-no-data" v-else>
                <img src="../../assets/flowlist/no-data.png">
            </div>
          </div>
        </div>
        <!-- 底部navbar 待办任务-->
        <div class="el-drawer-navbar" v-show="falgtodo">
          <div class="comment" @click="openComment(approvalDetail)">
            <div class="comment-icon">
              <img src="../../assets/flowlist/comment.png">
            </div>
            <div class="comment-title">评论</div>
          </div>

          <div class="transfer" @click="handleTransfer(approvalDetail)">
            <div class="comment-icon">
              <img src="../../assets/flowlist/transfer.png">
            </div>
            <div class="comment-title">转办</div>
          </div>

          <div class="reject" v-show="false" @click="handleReject(approvalDetail)">
            <div class="comment-icon">
              <img src="../../assets/flowlist/reject.png">
            </div>
            <div class="comment-title">驳回</div>
          </div>
          <div class="el-agree">
            <el-button @click="openAgree(approvalDetail)" type="primary">同意</el-button>
          </div>
          <div class="el-refuse">
            <el-button @click="openRefuse(approvalDetail)" type="danger">拒绝</el-button>
          </div>
        </div>
        <!-- 底部navbar 我的流程-->
        <div class="el-drawer-navbar" v-show="falgmyflow">
          <div class="el-agree">
          </div>
          <div class="el-refuse">
            <el-button :disabled="!approvalDetail.canRecly" :loading="recycle1" @click="handleRecycle(approvalDetail)" type="danger">{{recycle1?'加载中':'撤回申请'}}</el-button>
          </div>
        </div>
      </div>
    </el-drawer>
    <!-- 审批意见 -->
    <el-dialog
        width="40%"
        :title="commentText"
        :close-on-click-modal="false"
        :visible.sync="innerVisible"
        append-to-body>
        <div class="comment-box">
          <el-input
            type="textarea"
            :rows="6"
            placeholder="请输入审批意见"
            v-model="approvalOptions">
          </el-input>
        </div>
        <!-- 上传附件 -->
        <div class="upload-file">
          <el-upload class="upload-demo" ref="uploadingss" action="#" :auto-upload="false" multiple
            :on-error="uploaderror" :file-list="fileList" :on-change="onChange">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </div>
        <div v-show="nodeFlag">
            驳回节点：
            <el-select v-model="rejectNodeId" placeholder="请选择驳回节点">
              <el-option
                v-for="(item, index) in processInfo.rejectnode"
                :key="index"
                :label="item.activityName || '[' + getNodeTypeName(item.activityType) + ']'"
                :value="item.activitiId"
          >
              </el-option>
            </el-select>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button :type="(commentText =='同意' || commentText =='评论') ? 'primary':'danger'" :loading="send1" @click="sendApproval">{{send1 ? '正在发送':commentText}}</el-button>
          <el-button @click="innerVisible = false">取 消</el-button>
        </span>
    </el-dialog>
    <!-- 选择人员 -->
    <SelectStaff :circulatPeoples="circulatPeoples" @transmissionData="transmissionData" ref="selectStaff" />
    <!-- 转办弹出框 -->
    <el-dialog v-dialogDrag
      title="选择转办审批人"
      :append-to-body="true"
      :visible.sync="transferDialogVisible"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      width="60%"
    >
      <SelectUser
        v-if="transferDialogVisible"
        ref="addPesonelRef"
        :isSingle="true"
        :disabledUserIds="disabledUserIds"
        :selectedList="selectedMemberList"
      ></SelectUser>

      <span slot="footer">
        <el-button
          size="mini"
          type="primary"
          @click="confirmDialog()"
          class="member-submit"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import { 
    getUpcomingTasks,deleteProcessInstance,deleteDrafts,
    getManualTask,getHistoryTask,getMyTask,getDrafts,getRecycleTask,
    deleteToRecyclebin,getRetractNode,recallProcess,getFormData,
    batchCirculation,getCirculationList } from "@/api/workFlow/WFProcess";
  import { baseUrl,previewUrl } from "@/config/env";
  import request from "@/router/axios";
  import { v4 as uuidv4 } from "uuid";
  import SelectUser from "@/components/organization/SelectUser";
  import axios from 'axios'
  import SelectStaff from '@/components/staffSelector/selectStaff.vue'
  import { getTaskForm,getManualInfo,changeCandidateUser,postTaskHandle,getNodeInfo, getViewProcess,getHistoryTaskList,getAnnexInfo,getValidateSignation} from "@/api/workFlow/WFLaunch";
  export default {
    components: {SelectUser,SelectStaff },
    data() {
      return {
        falgFlase:false,
        xjrSelectUser:false,
        transferDialogVisible:false,
        firstFlag:true,
        secondFlag:false,
        send1:false,
        agree1:false,
        disagree1:false,
        relaunch1:false,
        recycle1:false,
        approvalOptions:'',
        fileList: [],
        folderId:'',
        drawer: false,
        direction: 'rtl',
        falgtodo:true,//代办
        falgflow:false,//发起流程
        falgdone:false,//已办
        falgmyflow:false,//我的流程
        falgread:false,//我的传阅
        falgdrafts:false,//草稿箱
        falgrecycle:false,//回收站
        status:'',//审批状态
        durationTime:'',
        endTime:'',
        startTime:'',
        keyword:'',//关键字审批类型和发起人
        listData:[],
        total:0,
        total1:0,
        manualTaskTotal:0,
        options: [
          {
            value: '',
            label: '请选择审批状态'
          },
          {
            value: 0,
            label: '审批拒绝'
          }, {
            value: 1,
            label:'审批通过'
          }, {
            value: 3,
            label: '审批中'
          }
        ],
        limit:1,//当前页数
        size:5,//每页大小
        approvalDetail:[],
        formData:{},
        activeName: 'approvalDetails',
        innerVisible:false,
        commentText:'',
        commentTextFlag:false,
        nodeFlag:false,
        circulationRecord:[],//流转信息
        loading:false,
        loading1:false,
        enclosure:[],
        schemeInfo:{},
        formData:{},
        urlname:'',
        requestUrl:'',
        SchemeInfo_F_Id:'',
        btnValue:'',
        disabledUserIds: [],
        oldUserId: "",
        taskId:'',
        selectedMemberList: [],
        processInfo: {
          forms: null, // 表单
          infos: null, // 图片
          roams: [], // 流转
          files: [], // 附件
          subs: [], // 子流程
          roams: [],
          functionBtnInfo:{},//功能按钮
          btnInfo: {}, // 按钮信息
          nodeInfo: {}, // 审批节点 关联意见框、电子签章密码等
          myStamps: [], // 我的签章列表
          forms_data: [], // 表单数据
          signation: false, //加签或减签(用于显示 加签或减签 按扭)
          forwarderList: [], //原有传阅人列表
          rejectnode: [], // 已流转过的节点用于驳回选择
          task_comment: [] //关联意见框 审批意见
        },
        draftsFlag:false,
        recyFlag:false,
        filePath:'',
        fileFullPath:'',
        nexNodeApprovalName:[],
        circulatPeoples:[],
        showFileds:[],
        FId:'',
        FileTitle:'',
        FiledKey:'',
        rejectNodeId:'',
        withDrawGlag:false,
        rejectNodeData:[],
        uploadSuccess:false,
        circulationData:[],//手动传阅人
      };
    },
    async mounted () {
      //获取代办任务列表
      await this.getUpcomingTasks()
      //获取我的传阅列表
      await this.getManualTask(1)
      let userInfo = localStorage.getItem("avue-userInfo")? JSON.parse(localStorage.getItem("avue-userInfo")).content: {};
      this.oldUserId = userInfo.F_UserId;
      this.disabledUserIds.push(userInfo.F_UserId);
      // 从首页跳转过来打开对应详情，然后在删除key
      if(localStorage.getItem('toProcess')) {
        this.toDetails(JSON.parse(localStorage.getItem('toProcess')))
        localStorage.removeItem('toProcess')
      }
    },
    watch:{
      durationTime(value){
        if(value && value.length > 0){
          this.startTime = value[0]
          this.endTime = value[1]
          this.search()
        }else{
          this.startTime = ''
          this.endTime = ''
          this.search()
        }
      }
    },
    methods:{
      selectStatus(){
        this.search()
      },
      getFLowName(id){
        let result = ""
          request({
            url: baseUrl+'/workflow-task/listTaskByUserId?processInstanceIds='+id,
            method: "get",
          }).then(e => {
              if(e.data.success){
                let resData = e.data.data
                if(resData.Rows && resData.Rows.length > 0){
                    result = resData.Rows[0].startUser+'提交的'+ resData.Rows[0].schemeName
                    document.getElementById(id).innerHTML = result
                }
              }
          })
      },
      getFLowName1(id){
        let result = ""
          request({
            url: baseUrl+'/workflow-task/listTaskByUserId?processInstanceIds='+id,
            method: "get",
          }).then(e => {
              if(e.data.success){
                let resData = e.data.data
                if(resData.Rows && resData.Rows.length > 0){
                    result = resData.Rows[0].startUser+'提交的'+ resData.Rows[0].schemeName
                    document.getElementById(id).innerHTML = result
                }
              }
          })
      },
      reset(){
        this.keyword = ""
        this.search()
      },
      async getNodeInfo(item){
        let nodeResult = await getNodeInfo({
          processInstanceId: item.processInstanceId
        });
        if (nodeResult && nodeResult.data && nodeResult.data.success) {
          this.processInfo.btnInfo = nodeResult.data.data.btnInfo;
          this.processInfo.functionBtnInfo = nodeResult.data.data.functionBtnInfo;

          if (nodeResult.data.data.approvalcomponents) {
            let needpassword =
              nodeResult.data.data.approvalcomponents.needpassword;
            this.processInfo.nodeInfo = {
              esignature: "",
              needpassword: needpassword == 2 ? true : false
            };
          } else {
            this.processInfo.nodeInfo = { esignature: "", needpassword: false };
          }
          //processInfo.rejectnode
          this.processInfo.rejectnode = nodeResult.data.data.retNodeList
            ? nodeResult.data.data.retNodeList
            : [];
        }
        // 加签或减签验证接口
        let signationResult = await getValidateSignation({
          taskId: this.taskId
        });
        if (signationResult && signationResult.data && signationResult.data.success && signationResult.data.data) {
          this.processInfo.signation = true; // 显示 加签或减签 按扭
        }
      },
      // 上传文件之前的钩子
      onChange(file) {
        let count = 0
        if(file){
          count++
          let size = file.size/1024/1024
          if(size > 3){
            this.message.error("上传的文件大小不能超过3M")
            return
          }else{
            this.fileValueChange(file)
          }
        }
			},
      getSelectedList() {
        let data = this.$refs.addPesonelRef.pushParentData();
        if (data.length > 0) {
          data.forEach(ele => {
            let temp = {
              F_ObjType: "3",
              F_ObjId: ele.F_UserId,
              F_ObjName: ele.F_RealName
            };
            this.selectedMemberList.push(temp);
          });
        }
      },
      download(item){
        if(item.filePath){
          window.location.href = item.filePath
        }
      },
      download1(item){
        if(item.fileFullPath){
          window.location.href = item.fileFullPath
        }
      },
      preview1(item){
        if(item.fileFullPath){
          this.fileFullPath = previewUrl + encodeURIComponent(window.btoa(item.fileFullPath)); //(4.09以上版本)这里反斜杠必须有
          window.open(this.fileFullPath )
        }
      },
      preview_(item){
        if(item.filePath){
          this.filePath = previewUrl + encodeURIComponent(window.btoa(item.filePath)); //(4.09以上版本)这里反斜杠必须有
          window.open(this.filePath )
        }
      },
      fileValueChange(file) {
        let _this = this
        this.folderId = uuidv4()
        var formdata = new FormData()
        formdata.append("file", file.raw);
        axios({
          method: 'post',
          url:`${baseUrl}/upload/oss/${_this.folderId}/batch`,
          headers: {'Content-Type': 'multipart/form-data'},
          data:formdata
        }).then(res => {
          if(res.data.success){
           this.uploadSuccess = true
          }
        })

			},
      uploaderror(error) {
				console.error(error)
			},
      handleClick() {
        if(this.activeName == 'approvalDetails'){
          this.firstFlag = true
          this.secondFlag = false
        }else if(this.activeName == 'attachment'){
          this.firstFlag = false
          this.secondFlag = true
        }
      },
      //获取代办任务列表
      getUpcomingTasks(){
        let params = {
          limit: this.limit,
          size: this.size,
          order: "desc",
          orderfield: "",
          nwfRelationId: "",
          startTime: this.startTime, // 起始时间
          endTime: this.endTime, // 结束时间
          keyword:this.keyword,//发起人或审批类型
          status:this.status,//审批状态
          serialNumber: "", // 流水号
          SchemeType: "" // 模板类型

        };
        this.loading = true
        getUpcomingTasks(params).then(res => {
          if(res.data.success){
            this.loading = false
            if(res.data.data && res.data.data.Rows){
              this.listData = res.data.data.Rows
              this.total1 = res.data.data.Total
              this.total = res.data.data.Total
            }
          }else{
            this.loading = false
          }
        })
      },
      //发起流程
      createFlow(){
        this.$router.push({
          path: '/workflow/launch'
        })
      },
      //获取已办任务列表
      getHistoryTask(){
        let params = {
          limit: this.limit,
          size: this.size,
          order: 'desc',
          orderfield:'',
          startTime: this.startTime, // 起始时间
          endTime: this.endTime, // 结束时间
          keyword:this.keyword,//发起人或审批类型
          status:this.status,//审批状态
          serialNumber:'', 
          SchemeType: '',
          queryParameter: {}
        }
        this.loading = true
        getHistoryTask(params).then(res => {
          if(res.data.success){
            this.loading = false
            if(res.data.data && res.data.data.Rows){
              this.listData = res.data.data.Rows
              this.total = res.data.data.Total
            }
          }else{
            this.loading = false
          }
        })
      },
      //获取我的流程列表
      getMyTask(){
        let params = {
          limit: this.limit,
          size: this.size,
          order: 'desc',
          orderfield:'', 
          startTime: this.startTime, // 起始时间
          endTime: this.endTime, // 结束时间
          keyword:this.keyword,//发起人或审批类型
          status:this.status,//审批状态
          serialNumber:'', 
          SchemeType: '',
          queryParameter: {}
        }
        this.loading = true
        getMyTask(params).then(res => {
          if(res.data.success){
            this.loading = false
            if(res.data.data && res.data.data.Rows){
              this.listData = res.data.data.Rows
              this.total = res.data.data.Total
            }
          }else{
            this.loading = false
          }

        })
      },
      //获取我的传阅列表
      getManualTask(v){
        let params = {
          limit: this.limit,
          size: this.size,
          order: 'desc',
          orderfield: '',
          startTime: this.startTime, // 起始时间
          endTime: this.endTime, // 结束时间
          keyword:this.keyword,//发起人或审批类型
          status:this.status,//审批状态
          serialNumber:'', 
          SchemeType: '',
          queryParameter: {}
        }
        if(v == 1){
            getManualTask(params).then(res => {
              if(res.data.success){
                if(res.data.data && res.data.data.Total){
                  this.manualTaskTotal  = res.data.data.Total
                }
              }
            })
        }else{
          this.loading = true
          getManualTask(params).then(res => {
              if(res.data.success){
                this.loading = false
                if(res.data.data && res.data.data.Rows){
                  this.total = this.manualTaskTotal = res.data.data.Total
                  this.listData = res.data.data.Rows
                }
              }else{
                this.loading = false
              }
            })
        }
      },
      //获取草稿箱列表
      getDrafts(){
        let params = {
          limit: this.limit,
          size: this.size,
          order: 'desc',
          orderfield: '',
          startTime: this.startTime, // 起始时间
          endTime: this.endTime, // 结束时间
          keyword:this.keyword,//发起人或审批类型
          status:this.status,//审批状态
        
          serialNumber:'', 
          SchemeType: '',
          queryParameter: {}
        }
        this.loading = true
        getDrafts(params).then(res => {
          if(res.data.success){
            this.loading = false
            if(res.data.data && res.data.data.Rows){
              this.listData = res.data.data.Rows
              this.total  = res.data.data.Total
            }
          }else{
            this.loading = false
          }
        })
      },
      //获取回收站列表
      getRecycleTask(){
        let params = {
          limit: this.limit,
          size: this.size,
          order: 'desc',
          orderfield: '',
           startTime: this.startTime, // 起始时间
          endTime: this.endTime, // 结束时间
          keyword:this.keyword,//发起人或审批类型
          status:this.status,//审批状态
        
          serialNumber:'', 
          SchemeType: '',
          queryParameter: {}
        }
        this.loading = true
        getRecycleTask(params).then(res => {
          if(res.data.success){
            this.loading = false
            if(res.data.data && res.data.data.Rows){
              this.listData = res.data.data.Rows
              this.total  = res.data.data.Total
            }
          }else{
            this.loading = false
          }
        })
      },
      // 左侧菜单栏
      getToDo(val){
        //获取代办任务列表
        this.listData = []
        this.total = 0
        this.status = ''
        this.durationTime = ''
        this.keyword = ''
        if(val == 'todo'){
          this.falgtodo = true
          this.falgflow = this.falgdone = this.falgmyflow = this.falgread = this.falgdrafts = this.falgrecycle = false
          this.getUpcomingTasks()
        }else if(val == 'flow'){//发起流程
          this.falgflow = true
          this.falgtodo = this.falgdone = this.falgmyflow = this.falgread = this.falgdrafts = this.falgrecycle = false
          this.createFlow()
      }else if(val == 'done'){//已办任务
          this.falgdone = true
          this.falgtodo = this.falgflow = this.falgmyflow = this.falgread = this.falgdrafts = this.falgrecycle = false
          this.getHistoryTask()
        }else if(val == 'myflow'){//我的流程
          this.falgmyflow = true
          this.falgtodo = this.falgflow = this.falgdone = this.falgread = this.falgdrafts = this.falgrecycle = false
          this.getMyTask()
        } else if(val == 'read'){//我的传阅
          this.falgread = true
          this.falgtodo = this.falgflow = this.falgdone = this.falgmyflow = this.falgdrafts = this.falgrecycle = false
          this.getManualTask()
        }else if(val == 'drafts'){//草稿箱
          this.falgdrafts = true
          this.falgtodo = this.falgflow = this.falgdone = this.falgmyflow = this.falgrecycle = this.falgread = false
          this.getDrafts()
        }else if(val == 'recycle'){
          this.falgrecycle = true
          this.falgtodo = this.falgflow = this.falgdone = this.falgmyflow = this.falgdrafts = this.falgread = false
          this.getRecycleTask()
        }
      },
      handleCurrentChange(val){
        this.limit = val
        this.getList()
      },
      getList(){
        // 待办
        if(this.falgtodo){
          this.getUpcomingTasks()
        }else if(this.falgdone){//已办
          this.getHistoryTask()
        }else if(this.falgmyflow){//我的流程
          this.getMyTask()
        }else if(this.falgread){//我的传阅
          this.getManualTask()
        }else if(this.falgdrafts){//草稿箱
          this.getDrafts()
        }else if(this.falgrecycle){//回收站
          this.getRecycleTask()
        }
      },
      //搜索
      search(){
        //待办列表
        if(this.falgtodo){
          this.getUpcomingTasks()
        }else if(this.falgdone){//已办列表
          this.getHistoryTask()
        }else if(this.falgmyflow){//我的流程
          this.getMyTask()
        }else if(this.falgread){//我的传阅
          this.getManualTask()
        }else if(this.falgdrafts){//草稿箱
          this.getDrafts()
        }else if(this.falgrecycle){//回收站
          this.getRecycleTask()
        }
      },  
      approvalAgree(){
        this.$confirm('确定同意该审批吗?', '合同', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(() => {});
      },
      scrollToTop() {
          let that = this
          let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
          that.scrollTop = scrollTop
          if(that.scrollTop >200) {
              that.btnFlag = true
          } else {
              that.btnFlag = false
          }
      },
      //返回顶部
      backTop(){
        let initialNode = document.getElementById("scroll-view")
        const timeTop = setInterval(() => {
          initialNode.scrollTop -= 100
          if (initialNode.scrollTop <= 0) {
            clearInterval(timeTop)
          }
        }, 10)
      },
      handleApproval(val){
        if(val == 'comment'){
          this.commentText = '评论'
          this.commentTextFlag = true
          this.nodeFlag = false
        }else if(val == 'agree'){
          this.commentText = '同意'
          this.commentTextFlag = false
          this.nodeFlag = false
        }else if(val == 'refuse'){
          this.commentText = '拒绝'
          this.commentTextFlag = false
          this.nodeFlag = false
        }else if(val == 'reject'){
          this.commentText = '驳回'
          this.commentTextFlag = false
          this.nodeFlag = true
        }
        this.innerVisible = true
        
      },
      getCirculationList(item){
        getCirculationList(item.processInstanceId).then(res => {
          if(res.data.success){
            this.circulationData = res.data.data
          }
        })
      },
      //打开右侧抽屉
      toDetails(item){  
        //初始化
        this.firstFlag = true
        this.secondFlag= false
        this.activeName = "approvalDetails"
        this.approvalDetail = item
        //代办、已办、我的流程、我的传阅
        if(this.falgtodo || this.falgdone || this.falgmyflow || this.falgread){//待办
          //流转记录
          this.getHistoryTaskList(item)
          //附件
          this.getAnnexInfo(item)
          this.drawer = true
        }else if(this.falgdrafts){//草稿箱
          this.drawer = true
        }else if(this.falgrecycle){//回收站
        }
        //查询审批人和传阅人
      },
      async getManualInfo(item){
        let manualInfoResult = await getManualInfo({
          taskId: this.taskId,
          processInstanceId: this.processInstanceId
        });
        if (manualInfoResult && manualInfoResult.data && manualInfoResult.data.success) {
        }
      },
      getHistoryTaskList(item){
        let params = {
          processInstanceId: item.processInstanceId,
        }
        this.loading1 = true
        getHistoryTaskList(params).then(res => {
          if(res.data.success){
            this.loading1 = false
            this.circulationRecord = res.data.data
            //设置审批人
            setTimeout(() => {
              if(this.circulationRecord && this.circulationRecord.length > 0){
                this.nexNodeApprovalName = this.circulationRecord[this.circulationRecord.length-1].nextNodeInfo
              }
            }, 0);
            //设置传阅人信息接口manualinfos
            setTimeout(() => {
              this.circulatPeoples = []
              if(this.circulationRecord && this.circulationRecord.length > 0){
                for(let i = 0;i < this.circulationRecord.length;i++){
                  if(this.circulationRecord[i].manualinfos && this.circulationRecord[i].manualinfos.length > 0){
                    for(let j = 0;j < this.circulationRecord[i].manualinfos.length;j++){
                      this.circulatPeoples.push(this.circulationRecord[i].manualinfos[j])
                    }
                  }
                }
                // 去重
                this.circulatPeoples = [...new Set(this.circulatPeoples)]
                this.getCirculationList(item)
              }
            }, 0);
          }else{
            this.loading1 = false
          }
        })
      },
      getAnnexInfo(item){
        let params = {
          processInstanceId: item.processInstanceId,
          taskId: item.taskId,
        }
        getAnnexInfo(params).then(res => {
          if(res.data.success){
            this.enclosure = res.data.data
          }
        })
      },
      //重新发起
      relaunch(item){
        this.relaunch1 = true
        deleteToRecyclebin(item.processInstanceId).then(res => {
          if(res.data.success){
            this.relaunch1 = false
            this.$message.success("操作成功")
            this.getToDo('flow')
          }else{
            this.relaunch1 = false
          }
        })
      },
      withdraw(item){
        let params = {
          taskId:item.taskId
        }
        this.withDrawGlag = true
        getRetractNode(params).then(res => {
          if(res.data.success){
            this.rejectNodeData = res.data.data
            this.withdrawSure(item)
          }else{
            this.$message.error(res.data.msg)
            this.withDrawGlag = false
          }
          
        },error => {
          this.$message.error(error)
          this.withDrawGlag = false
        })
        
      },
      withdrawSure(item){
        let that = this
        if(this.rejectNodeData && this.rejectNodeData.length > 0){
          let p = {
            processInstanceId:item.processInstanceId,
						taskId:that.rejectNodeData[that.rejectNodeData.length-1].taskId
          }
          recallProcess(p).then(res => {
            if(res.data.success){
              this.$message.success("操作成功")
              this.withDrawGlag = false
              this.search()
            }
          },error=>{
            this.$message.error(error)
              this.withDrawGlag = false
          })
        }
      },
      //移入回收站
      handleRecycle(item){
        let _this = this
        this.recycle1 = true
        this.$confirm('确认移入回收站, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteToRecyclebin(item.processInstanceId).then(res => {
            console.log(res);
            if(res.data.success){
              this.$message.success("操作成功")
              this.recycle1 = false
              this.getToDo('myflow')
              this.drawer = false
            }else{
              this.recycle1 = false
              this.getToDo('myflow')
              this.drawer = false
            }
          })
        }).catch(()=>{
            _this.recycle1 = false
          })
      },
      //同意按钮
      toDoAgreeList(item){
        //调用task-form接口
        this.btnValue = "agree_"
        this.agree1 = true//打开loading
        let params = {
          taskId:item.taskId,
          nwfRelationId:''
        }
        getTaskForm(params).then(res => {
          if(res.data.success){
            if(res.data.data && res.data.data.length > 0){
              this.schemeInfo = res.data.data[0].SchemeInfo
              this.formData = res.data.data[0].formData
              this.SchemeInfo_F_Id = res.data.data[0].SchemeInfo.F_Id
              this.setRequestUrl(item)
            }
          }else{
            this.agree1 = false
            this.$message.error("getTaskForm错误")
          }
        },error => {
          this.agree1 = false
          this.$message.error(error)
        })
      },
      //拒绝按钮
      toRefuseList(item){
        //调用task-form接口
        this.btnValue = "disagree_"
        this.disagree1 = true
        let params = {
          taskId:item.taskId,
          nwfRelationId:''
        }
        getTaskForm(params).then(res => {
          if(res.data.success){
            if(res.data.data && res.data.data.length > 0){
              this.schemeInfo = res.data.data[0].SchemeInfo
              this.formData = res.data.data[0].formData
              this.SchemeInfo_F_Id = res.data.data[0].SchemeInfo.F_Id
              this.setRequestUrl(item)
            }
          }else{
            this.disagree1 = false
            this.$message.error("getTaskForm错误")
          }
        },error => {
          this.disagree1 = false
          this.$message.error(error)
        })
      },
      toReject(item){
        if(!this.rejectNodeId){
          this.$message.error("请先选择驳回节点");
          return
        }
        this.btnValue = "reject_"
        let params = {
          taskId:item.taskId,
          nwfRelationId:''
        }
        getTaskForm(params).then(res => {
          if(res.data.success){
            if(res.data.data && res.data.data.length > 0){
              this.schemeInfo = res.data.data[0].SchemeInfo
              this.formData = res.data.data[0].formData
              this.SchemeInfo_F_Id = res.data.data[0].SchemeInfo.F_Id
              this.setRequestUrl(item)
            }
          }
        })
      },
      // 评论
      toComment(item){
        if(!this.uploadSuccess && !this.approvalOptions){
          this.send1 = false
          this.$message.error('请输入内容或附件')
          return
        }
        this.btnValue = "option_"
        let params = {
          taskId:item.taskId,
          nwfRelationId:''
        }
        getTaskForm(params).then(res => {
          if(res.data.success){
            if(res.data.data && res.data.data.length > 0){
              this.schemeInfo = res.data.data[0].SchemeInfo
              this.formData = res.data.data[0].formData
              this.SchemeInfo_F_Id = res.data.data[0].SchemeInfo.F_Id
              this.setRequestUrl(item)
            }
          }
        })
      },
      openAgree(item){
        if(this.$refs.uploadingss){
          this.$refs.uploadingss.clearFiles()
        }
        this.approvalOptions = ''
        this.btnValue = 'agree_'
        this.folderId = ''
        this.aitems = item
        this.commentText = '同意'
        this.commentTextFlag = false
        this.nodeFlag = false
        this.innerVisible = true
      },
      openRefuse(item){
        if(this.$refs.uploadingss){
          this.$refs.uploadingss.clearFiles()
        }
        this.approvalOptions = ''
        this.btnValue = 'disagree_'
        this.folderId = ''
        this.aitems = item
        this.commentText = '拒绝'
        this.commentTextFlag = false
        this.nodeFlag = false
        this.innerVisible = true
      },
      openComment(item){
        if(this.$refs.uploadingss){
          this.$refs.uploadingss.clearFiles()
        }
        //设置附件为空
        this.uploadSuccess = false
        this.folderId = ""
        this.approvalOptions = ''
        this.btnValue = 'option_'
        this.aitems = item
        this.commentText = '评论'
        this.commentTextFlag = true
        this.nodeFlag = false
        this.innerVisible = true
      },
      handleReject(item){
        if(this.$refs.uploadingss){
          this.$refs.uploadingss.clearFiles()
        }
        this.approvalOptions = ''
        this.btnValue = 'reject_'
        this.folderId = ''
        this.aitems = item
        this.commentText = '驳回'
        this.commentTextFlag = false
        this.nodeFlag = true
        this.innerVisible = true
        this.getNodeInfo(item)
      },
      // 发送
      sendApproval(){
        this.send1 = true
        if(this.btnValue == 'agree_'){
          this.toDoAgreeList(this.aitems)
        }else if(this.btnValue == 'disagree_'){
          this.toRefuseList(this.aitems)
        }else if(this.btnValue == 'option_'){
          this.toComment(this.aitems)
        }else if(this.btnValue == 'reject_'){
          this.toReject(this.aitems)
        }
        
      },
      //调用实体类
      setEntity(item){
        if(item.schemeName == '合同审批'){
          this.entity = "oa_contract_approvalingEntity"
        }else if(item.schemeName == '用印申请'){
          this.entity = "apply_sealEntity"
        }else if(item.schemeName == '补卡' || item.schemeName == '补卡申请'){
          this.entity = "oa_apply_time_clock_cardEntity"
        }else if(item.schemeName == '日常报销' || item.schemeName == '日常报销(办公交通通讯劳务服务)'){
          this.entity = "oa_exp_dailyEntity"
        }else if(item.schemeName == '物品领用'){
          this.entity = "oa_equipment_applicationEntity"
        }else if(item.schemeName == '换班'){
          this.entity = "oa_exchange_classEntity"
        }else if(item.schemeName == '外派' || item.schemeName == '外派申请'){
          this.entity = "oa_expatriateEntity"
        }else if(item.schemeName == '通用审批'){
          this.entity = "general_approvalEntity"
        }else if(item.schemeName == '外出'){
          this.entity = "tl_go_outEntity"
        }else if(item.schemeName == '事项报批'){
          this.entity = "items_approvalEntity"
        }else if(item.schemeName == '请假'){
          this.entity = "oa_leave_applicationEntity"
        }else if(item.schemeName == '证照管理'){
          this.entity = "license_managerEntity"
        }else if(item.schemeName == '耗材供应商名录'){
          this.entity = "material_supplierEntity"
        }else if(item.schemeName == '耗材合同审批'){
          this.entity = "material_contractEntity"
        }else if(item.schemeName == '招待会议需求单'){
          this.entity = "reception_meetingEntity"
        }else if(item.schemeName == '发文审批单'){
          this.entity = "out_going_messageEntity"
        }else if(item.schemeName == '加班'){
          this.entity = "tl_overtime_applicationEntity"
        }else if(item.schemeName == '付款申请'){
          this.entity = "pay_applyEntity"
        }else if(item.schemeName == '物品清单'){
          this.entity = "oa_purchase_listEntity"
        }else if(item.schemeName == '排班申请'){
          this.entity = "oa_scheduling_approveEntity"
        }else if(item.schemeName == '指定采购审批表'){
          this.entity = "special_buy_approvalEntity"
        }else if(item.schemeName == '出差'){
          this.entity = "oa_travelEntity"
        }else if(item.schemeName == '啤酒明细单'){
          this.entity = "oa_beer_detailEntity"
        }else if(item.schemeName == '招标审批'){
          this.entity = "oa_bidding_approvalEntity"
        }else if(item.schemeName == '图书购买需求单'){
          this.entity = "oa_book_buy_needEntity"
        }else if(item.schemeName == '图书借阅'){
          this.entity = "oa_book_lendEntity"
        }else if(item.schemeName == '图书单'){
          this.entity = "oa_book_listEntity"
        }else if(item.schemeName == '预算审批'){
          this.entity = "oa_budgetEntity"
        }else if(item.schemeName == '名片印制申请'){
          this.entity = "oa_card_printedEntity"
        }else if(item.schemeName == '合同审批'){
          this.entity = "oa_contract_approvalingEntity"
        }else if(item.schemeName == '定标审批'){
          this.entity = "oa_determine_mark_approvalEntity"
        }else if(item.schemeName == '酒水领用申请'){
          this.entity = "oa_drinks_detailEntity"
        }else if(item.schemeName == '设备合同审批'){
          this.entity = "oa_equipment_contractEntity"
        }else if(item.schemeName == '设备供应商名录'){
          this.entity = "oa_equipment_supplierEntity"
        }else if(item.schemeName == '白酒水明细单'){
          this.entity = "oa_liquor_detailEntity"
        }else if(item.schemeName == '日常办公合同审批'){
          this.entity = "oa_office_contractEntity"
        }else if(item.schemeName == '运营收票管理'){
          this.entity = "oa_operate_ticketEntity"
        }else if(item.schemeName == '运营采购申请单'){
          this.entity = "oa_operating_buyEntity"
        }else if(item.schemeName == '运营费用报销（汽油保险修理养护会议培训）'){
          this.entity = "oa_operating_reimburseEntity"
        }else if(item.schemeName == '项目资料'){
          this.entity = "oa_peoject_dataEntity"
        }else if(item.schemeName == '备用金申请'){
          this.entity = "oa_pettycash_approvalEntity"
        }else if(item.schemeName == '项目变更申请'){
          this.entity = "oa_project_changeEntity"
        }else if(item.schemeName == '项目采购清单'){
          this.entity = "oa_project_purchaseEntity"
        }else if(item.schemeName == '采购需求清单'){
          this.entity = "oa_purchase_demand_listEntity"
        }else if(item.schemeName == '收票管理'){
          this.entity = "oa_purchase_ticketEntity"
        }else if(item.schemeName == '立项申请'){
          this.entity = "oa_set_projectEntity"
        }else if(item.schemeName == '技术方案协议等文件审批单'){
          this.entity = "oa_skill_protocolEntity"
        }else if(item.schemeName == '车辆使用申请单'){
          this.entity = "oa_vehicle_useEntity"
        }else if(item.schemeName == '红酒水明细单'){
          this.entity = "oa_wine_detailEntity"
        }else if(item.schemeName == '三土测试'){
          this.entity = "oa_liquor_detailEntity"
        }else if(item.schemeName == '测试表单'){
          this.entity = "oa_beer_detailEntity"
        }else if(item.schemeName == 'IM推送测试-N'){
          this.entity = "oa_liquor_detailEntity"
        }else if(item.schemeName == '换班申请'){
          this.entity = "oa_exchange_classEntity"
        }else if(item.schemeName == '差旅及招待报销' || item.schemeName == '差旅以及招待报销'){
          this.entity = "oa_exp_travelEntity"
        }else if(item.schemeName == 'cs-xmbgsq'){
          this.entity = "oa_project_changeEntity"
        }
      },
      //审核
      async setRequestUrl(item){
        let form;
        if(this.schemeInfo.F_UrlAddress){
          let arr = this.schemeInfo.F_UrlAddress.split('/')
          if(arr.length > 0 && arr.length == 3){
            this.urlname = arr[2]
          }
        }
        this.requestUrl = baseUrl+'/'+this.urlname+'/'+this.formData.F_Id
        //获取表单数据
        getFormData(this.requestUrl).then(res => {
          if(res.data.success && res.data.data){
            form = res.data.data
            // 如何设置实体类
            this.setEntity(item)
            this.initNext(form,item)
          }else{
            this.agree1 = false
            this.disagree1 = false
            this.$message.error("数据异常")
          }
        },error => {
          this.agree1 = false
          this.disagree1 = false
          this.$message.error(error)
        })
        // let res = await request({
        //   url: this.requestUrl,
        //   method: "get",
        // });
        // if(res.data.success){
        //   if(res.data.data){
        //     form = res.data.data
        //   }else{
        //     this.agree1 = false
        //     this.disagree1 = false
        //     this.$message.error('没有数据')
        //   }
        // }else{
        //   this.agree1 = false
        //   this.disagree1 = false
        //   this.$message.error('出错了！！！')
        // }
        
      },
      async initNext(form,item){
        //设置参数
        let params = {
          [this.entity]:form,
          F_url:this.urlname,
          idKey:this.formData.F_Id
        }
        //调用第一个接口
        await request({
          url: this.requestUrl,
          method: "put",
          data:params
        });

        // if(!result.data.success){
        //   this.$message.error("出错了")
        //   return
        // }else{
        //   this.agree1 = false
        //   this.disagree1 = false
        // }

        //调用第二个接口task-handle
        let keyValue = [
          {
            F_Id:this.formData.F_Id,
            F_FormId:this.SchemeInfo_F_Id,
            F_Type:'2',
            F_UrlAddress:this.urlname,
          }
        ]
        let p = {
          taskId:item.taskId,
          btnValue:this.btnValue,
          message:this.approvalOptions,
          esignature:"",
          esignature_pwd:null,
          forwarderList:"[]",
          formValue:"[]",
          keyValue:JSON.stringify(keyValue),
          rejectNodeId:this.rejectNodeId,//驳回
          userJson:"[]",
          fileValue:[],
          taskAttachmentFolderId:this.folderId,
        }
        postTaskHandle(p).then(res => {
          if(res.data.success){
            //操作成功时的回调
            //评论
            this.$message.success("操作成功")
              this.innerVisible = false
              this.drawer = false
              this.send1 = false     
              this.agree1 = false   
              this.disagree1 = false   
              this.search()
              // 清空附件和意见框
              this.folderId = ''
              this.approvalOptions = ''
          }
        },() => {
          this.agree1 = false
          this.disagree1 = false
        })
      },
      //打开转办选择人员
      handleTransfer(item){
        this.taskId = item.taskId
        this.transferDialogVisible = true
      },
      //转办
      async confirmDialog(){
        this.getSelectedList();
        if (this.selectedMemberList.length == 0) {
          this.$message.warning('您未选择任何转办审批人');
        } else {
          let params = {
            taskId: this.taskId,
            oldUserId: this.oldUserId,
            newUserId: this.selectedMemberList[0].F_ObjId
          };
          let res = await changeCandidateUser(params);
          if (res && res.data && res.data.success) {
              this.$message(this.$t('workFlow.processTasks.hintTransferSuccess'));
              this.drawer = false
              this.transferDialogVisible = false
              this.search()
          } else {
            this.$message(this.$t('workFlow.processTasks.hintTransferFailed'));
          }
        }
      },
      //草稿箱删除
      handleDrafts(item){
        this.draftsFlag = true
        deleteDrafts(item.id).then(res =>{
          if(res.data.success){
            this.$message.success('操作成功')
            this.draftsFlag = false
            this.search()
          }else{
            this.draftsFlag = false
          }
        })

      },
      //回收站删除
      handleDelRecy(item){
        this.recyFlag = true
        deleteProcessInstance(item.processInstanceId).then(res => {
          if(res.data.success){
            this.$message.success("操作成功")
            this.recyFlag = false
            this.search()
          }else{
            this.recyFlag = false
          }
        })
      },
      //手动添加传阅人
      setCirculate(){
        this.$nextTick(()=>{
          this.$refs.selectStaff.openDialog()
        })
      },
      transmissionData(val){
        let userIds = []
        if(val && val.length > 0){
          val.forEach(e=>{
            userIds.push(e.F_UserId)
          })
          let params = {
            process_instance_id: this.approvalDetail.processInstanceId,
            task_id: this.approvalDetail.taskId,
            user_ids:userIds
          }
          console.log('params',params);
          batchCirculation(params).then(res => {
            console.log('res',res);
            if(res.data.success){
              this.$message.success("操作成功")
              this.drawer = false
              this.search()
              this.$nextTick(()=>{
                this.$refs.selectStaff.closeDialog()
              })
            }else{
              console.error(res);
            }
          },msg=>{
            console.error(msg)
          })
        }

        
      },
      //打印
      handlePrint(){
        window.print()
      }
    }
  };
</script>
<style scoped>
  .margintop24{
    margin-top:24px;
  }
  .flex2{
    height: 80px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
  }
  .mi-process-task{
    width: 100%;
    height: 100%;
  }  
  .border{
    border: 1px solid red;
  }
  .flex{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .flex1{
    display: flex;
    flex-direction: row;

  }
  .left1{
    width: 32px;
    height: 32px;
    position: relative;
  }
  .left1 > img{
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-left: 12px;
    margin-top: 8px;
  }
  .right1{
    width: 32px;
    height: 32px;
  }
  .weizhi{
    width: 24px;
    height: 24px;
    margin-left: 4px;
    margin-top: 4px;
    border-radius: 50%;
    background: #F00909;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 24px;
    text-align: center;
  }
  .weizhi1{
    width: 24px;
    height: 24px;
    margin-left: 4px;
    margin-top: 4px;
    border-radius: 50%;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 24px;
    text-align: center;
  }
  .middle1{
    width: 65px;
    height: 32px;
    margin-left: 6px;
  }
  .white{
    background: #fff;
  }
  .mi-process-task-left{
    width: 150px;
    height: 100%;
    border-radius: 8px;
    box-shadow: 0px 10px 8px 0px rgba(92,92,92,0.0800);
    
  }
  .mi-process-task-middle{
    width: 10px;
    height: 100%;
  }
   .mi-process-task-right{
    width: 100%;
    height: 100%;
    border-radius: 8px;
    box-shadow: 0px 10px 8px 0px rgba(92,92,92,0.0800);
    overflow: scroll;
  }
  .marginleft24{
    margin-left: 24px;
  }
  .left-items{
    width: 90%;
    height: 32px;
    margin: 8px auto;
    border-radius: 4px;
    
  }
  .title{
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 32px;
  }
  .left-items:hover{
    cursor: pointer;
    background: #EDEEF1;
  }
  .left-items:hover .middle1{
    color: #4371E4;
  }
  .left-items:active{
    background: #f2f2f2;
  }
  .left-items:active .middle1{
    font-weight: bold;
  }
  .background{
    background: #EDEEF1;
  }
  .mi-search{
    width: 100%;
    height: 80px;
    background: #fff;
    border-bottom: 1px solid #DEDEDE;
  }
  .mi-process-items{
    width: 1050px;
    height: 200px;
    border-bottom: 1px solid #DEDEDE;
    margin: 0 auto;
  }
  .mi-process-left{
    width: 50px;
    height: 100%;
  }
  .mi-process-middle{
    width: 1000px;
    height: 100%;
  }
  .mi-header{
    width: 36px;
    height: 36px;
    border-radius: 6px;
    margin-top: 27px;
    background: #4371E4;
  }
  .mi-header > img{
    width: 100%;
    height: 100%;
  }
  .icon-hover{
    color: #4371E4;
  }
  .middle-title{
    width: 100%;
    height: 32px;
    font-size: 16px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #333333;
    line-height: 32px;
    margin-top: 27px;
  }
  .process{
    padding: 2px 7px;
    background: #FFF2E0;
    border-radius: 2px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FE8B04;
    line-height: 20px;
  }
  .middle-content{
    width: 100%;
    /* height: 125px; */
    overflow: scroll;
    line-height: 1.5em;
    margin:8px 0;
  }
  .lefts1{
    width: 100px;
    height: 40px;
    border: 1px solid red;
  }
   .rights1{
    width: 100%;
    height: 40px;
    border: 1px solid red;
  }
  .middle-content:hover{
    cursor: pointer;
  }
  .height80{
    height: 29px;
  }
  .middle-button{
    width: 100%;
    height: 40px;
    margin-bottom: 12px;
  }
  .middle-button > a{
    line-height: 40px;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 40px;
  }
  .agree{
    color: #4371E4;
    background: #EDF8FF;
    border: 1px solid #4371E4;
  }
  .refuse{
    color: #FE6350;
    background: #FDF3F3;
    border: 1px solid #FE6350;
    margin-left: 30px;
  }
  .agree:hover{
    cursor: pointer;
  }
  .refuse:hover{
    cursor: pointer;
  }
  .mi-search-items{
    height: 36px;
  }
  .marginright24{
    margin-right: 24px;
  }
  .marginright48{
    margin-right: 48px;
  }
  .width350{
    width: 300px;
  }
  .width200{
    width: 200px;
  }
  .text-align{
    text-align: center;
  }
  .duration{
    margin-top:2px;
  }
</style>
<style scoped>
  .scroll-view {
    width: 100%;
  }
  .list-item {
    width: 1050px;
    /* height: 245px; */
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    border-bottom: 1px solid #DEDEDE;
  }
  .list-item-left{
    width: 50px;
    height: 100%;
  }
  .lsit-header{
    width: 36px;
    height: 36px;
    margin-top: 27px;
    margin-left: 7px;
    border-radius: 6px;
  }
  .lsit-header > img{
    width: 100%;
    height: 100%;
    border-radius: 6px;
  }
  .titles{
    margin-top: 27px;
  }
  .titles1{
    font-size: 16px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #333333;
    line-height: 22px;
  }
  .flex_1{
    display: flex;
    flex-direction: row;
  }
  .processing{
    width: 50px;
    height: 20px;
    background: #FFF2E0;
    border-radius: 2px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FE8B04;
    line-height: 20px;
    margin-left: 16px;
    text-align: center;
  }
  .refuseing{
     width: 50px;
    height: 20px;
    background: #FFEBEB;
    border-radius: 2px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FD513B;
    line-height: 20px;
    margin-left: 16px;
    text-align: center;
  }
  .agreeing{
     width: 50px;
    height: 20px;
    background: #D8F8DD;
    border-radius: 2px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #10A300;
    line-height: 20px;
    margin-left: 16px;
    text-align: center;
  }
  .list-item-right{
    width: 1000px;
    height: 100%;
    margin-left: 16px;
  }
  .back-top{
    width: 56px;
    height: 70px;
    position: fixed;
    right: 10px;
    bottom: 10px;
  }
  .back-top:hover{
    cursor: pointer;
  }
  .back-top1{
    width: 44px;
    height: 44px;
    margin: 0 auto;
  }
  .back-title{
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 20px;
  }
  </style> 
<style scoped>
  .el-drawer{
    width: 100%;
    height: 91%;
  }
  .upload-file{
    width: 50%;
  }
  .el-drawer-navbar{
    width: 100%;
    height: 76px;
    position: fixed;
    bottom: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #FFFFFF;
    box-shadow: 0px 2px 23px 0px rgba(92,92,92,0.1200);
  }
  .comment,.transfer,.reject{
    width: 30px;
    height: 50px;
    margin-left: 44px;
  }
  .comment:hover,.transfer:hover,.reject:hover{
    cursor: pointer;
  }
  .comment-icon{
    width: 22px;
    height: 22px;
    margin: 0 auto;
  }
  .comment-title{
      width: 30px;
      height: 25px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 28px;
  }
  .el-agree{
    margin-left: 46px;
    text-align: center;
  }
  .el-refuse{
    margin-left: 30px;
    text-align: center;
  }
  .el-drawer-top{
    margin: 0 40px;
  }
 
  ::v-deep .el-tabs__item.is-active{
    color: #4371E4!important;
  }
  ::v-deep .el-tabs__item.is-active:hover{
     color: #4371E4!important;
  }
  ::v-deep .el-tabs__item{
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    
  }
  ::v-deep.el-tabs__active-bar{
    background-color:#4371E4
  }
  ::v-deep .is-active{
      color: #4371E4;
  }
  .approval-details{
    font-size: 16px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #333333;
    line-height: 28px;
  }
  .approval-department{
    width: 100%;
    height: 32px;
    display: flex;
    flex-direction: row;
    margin-top: 6px;
  }
  .approval-department-title{
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 32px;
  }
  .approval-department-content{
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 32px;
    margin-left: 8px;
  }
  .horizontal-line{
    width: 100%;
    height: 10px;
    background: #F0F2F5;
  }

  .c-info-box{
    margin: 0 40px;
  }
  .c-info-title{
    font-size: 16px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #333333;
    line-height: 45px;
  }
  .c-info-content{
    width: 100%;
  }
  .c-info-header{
    width: 40px;
    height: 100%;
  }
  .c-info-text{
    width: 100%;
    height: 100%;
    margin-left: 20px;
  }
  .c-header{
    width: 40px;
    border-radius: 6px;
    text-align: center;
  }
  .c-header>img{
    width: 100%;
    border-radius: 6px;
  }
  .c-header-right{
    width: 99%;
    height: 40px;
  }
  .c-header-right-1{
    width: 99%;
    margin-top: 12px;
  }
  .c-header-right-2{
    width: 99%;
    margin-top: 15px;
  }
  .flex_1_2_1{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }
  .height28{
    height: 28px;
  }
  .c-header-right-applyname{
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 40px;
  }
  .c-header-right-applyname-1{
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 28px;
  }
  .c-header-right-applydate{
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 40px;
  }
  .c-header-right-applydate-1{
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 28px;
  }
  .c-header-right-applydate-2{
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #F77800;
    line-height: 28px;
    margin-left: 20px;
  }
  .c-header-right-applydate-3{
    width: 100%;
    height: 64px;
    margin-top:4px;
    display: flex;
    flex-direction: row;
  }
  .c-header-right-applydate-7{
    width: 100%;
    height: 64px;
    margin-top:4px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .c-header-right-applydate-6{
    width: 32px;
    height: 64px;
    margin-left: 12px;
  }
  .c-header-right-applydate-4{
    width: 32px;
    height: 32px;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #FFFFFF;
  }
  .c-header-right-applydate-4-1{
    width: 32px;
    height: 32px;
    border-radius: 4px;
  }
    .c-header-right-applydate-4-1>img{
      width: 100%;
      height: 100%;
    }
  .c-header-right-applydate-5{
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 32px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .line_{
    width: 1px;
    height: 42px;
    border-right: 1px solid #BFC0C7;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 20px;;
  }
  .line_1_1{
    width: 1px;
    height: 70px;
    border-right: 1px solid #BFC0C7;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 20px;
  }
  .line_1_1_1_2{
    width: 1px;
    height: 40px;
    border-right: 1px solid #BFC0C7;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 20px;

  }
  .line_1_1_1{
    width: 1px;
    height: 70px;
    border-right: 1px dashed #BFC0C7;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 20px;
  }
  .line_1{
    width: 99%;
    height: 42px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .height91{
    height: 91px!important;
  }
  .flex_{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  /* 开始***************************** */
  .circulation-information-items{
    display: flex;
    flex-direction: row;
  }
  .form-box{
    margin: 0 40px;
    overflow: scroll;
  }
  .apply-name{
    width: 100%;
    height: 40px;
    display: flex;
    flex-direction: row;
  }
  .margintop8{
    margin-top: 8px;
  }
  .apply-name-header{
    width: 40px;
    height: 40px;
    background: #4371E4;
    border-radius: 6px;
    font-size: 18px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 40px;
    text-align: center;
  }
  .apply-name-content{
    height: 40px;
    margin-left: 20px;
  }
  .text-second-item2{
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
  }
  .text-second-item1{
    height: 28px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .apply-name-content-name{
    height: 40px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    
  }
  .line-height40{
    line-height: 40px;
  }
  .second_approval{
    width: 100%;
  }
  .flex11{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .apply-name-content-date{
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
  }
  .margin-left20{
    margin-left: 20px;
  }
  .circulation-line{
    width: 2px;
    height: 50px;
    border-right: 1px dashed #BFC0C7;
    margin-left: 20px;
  }

  /* 结束************************** */
  .attachment-files{
    margin:0 40px;
  }
  .table-header{
    width: 100%;
    height: 40px;
    background: #F2F2F6;
    display: flex;
    flex-direction: row;
  }
  .number{
    width: 8%;
    height: 100%;
    border: 1px solid #DEDEDE;
  }
  .name{
    width: 20%;
    height: 100%;
    border: 1px solid #DEDEDE;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
  }
  .format{
    width: 20%;
    height: 100%;
    border: 1px solid #DEDEDE;
  }
  .components1{
    width: 20%;
    height: 100%;
    border: 1px solid #DEDEDE;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .upload-time{
    width: 17%;
    height: 100%;
    border: 1px solid #DEDEDE;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .operate{
    width: 15%;
    height: 100%;
    border: 1px solid #DEDEDE;
  }
  .font-size{
    font-size: 14px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #333333;
    line-height: 40px;
    text-align: center;
  }
  .font-size-body{
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 40px;
    text-align: center;
  }
  .table-body{
    width: 100%;
    height: 40px;
  }
  .comment-box{
    height: 150px;
  }
  
  .el-pagation{
    width:100%;
    height: 40px;
    text-align: center;
    margin-top: 12px;
  }
  .el-pagation-box{
    margin-top: 4px;
  }
  .el-tabs-left{
    width: 100%;
    height: 86%;
    background: #FFFFFF;
    box-shadow: 0px 10px 8px 0px rgba(92,92,92,0.0800);
    border-radius: 8px;
    overflow: scroll;
  }
   .el-tabs-right{
    width: 100%;
    height: 86%;
    background: #FFFFFF;
    box-shadow: 0px 10px 8px 0px rgba(92,92,92,0.0800);
    border-radius: 8px;
  }
  .height124{
    height: 124px;
  }
  .theme{
    height: 40px;
    font-size: 16px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #333333;
    line-height: 40px;
  }
  .company{
    height: 40px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #888888;
    line-height: 40px;
  }
  .approval-status-resufe{
    height: 24px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FD513B;
    line-height: 24px;
  }
  .approval-status-process{
    height: 24px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FE8B04;
    line-height: 24px;
  }
  .approval-status-agree{
    height: 24px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #10A300;
    line-height: 24px;
  }
  .margin40{
    margin: 0 40px;
  }
  .main-no-data{
    width:100%;
    height:85%;
    position: relative;
    text-align: center;
    margin-top: 200px;
  }
  .no-data-svg{
    width: 80px;
    height: 80px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
    .no-data-svg > span{
      color: rgba(0, 0, 0, .65);
      font-size: 14px;
      text-align: center;
    }
    .flex111{
      display: flex;
      flex-direction: column!important;
    }
    #flowName{
      font-size: 14px;
      font-weight: 400;
      color: #333333;
    }
    .flowName1{
      font-size: 14px;
      font-weight: 400;
      color: #333333;
    }
    .margintop20{
      margin-top: -12px;
    }
    .title-text{
      width: 100%;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 20px;
      display: flex;
      flex-direction: row;
      line-height: 2em;
    }
    .title-text > div{
      display: flex;
      flex-direction: row;
    }
    .title-text-content{
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #555555;
      line-height: 20px;
    }
    .itemsss1{
      width: 150px;
      border: 1px solid #999999;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
    }
    .c-comment{
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 28px;
    }
    .c-enclosure{
      width: 100%;
      height: 64px;
      background: rgb(243,244,246);
    }
    .c-enclosure1{
      width: 100%;
      height: 64px;
    }
    .flex_1_2{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
    .c-file{
      width: 36px;
      height: 36px;
      border-radius: 4px;
      margin-left: 8px;
      text-align: center;
    }
.c-file > img{
      width: 100%;
      height: 100%;
    }
    .c-file-desc{
      width: 60%;
      height: 36px;
      margin-left: 10px;
    }
    .c-file-name{
      height: 20px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #444444;
      line-height: 20px;
    }
    .c-file-size{
      height: 16px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 16px;
    }
    .postionRs{
      position: relative;
    }
    .c-file-operate{
      width: 30%;
      height: 36px;
      text-align: center;
      line-height: 36px;
    }
    .marginleft20{
      margin-left: 8px;
    }
    .visibility{
      visibility: hidden;
    }
    .preview-box{
      width: 100%;
      height: 600px;
      text-align: center;
    }
    .ok_1{
      width: 32px!important;
      height: 32px;
      position: relative;
      left: 20px;
      top: -13px;
    }
    .left_3{
      width: 100%;
      height: 28px;
      display: flex;
      flex-direction: row;
    }
    .flex__{
      display: flex;
      flex-direction: row;
    }
    .bordersss{
      border-bottom: 1px solid #999999;
    }
    .left_1{
      width: 100px;
      height: 100%;
      border: 1px solid red;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 28px;
      text-align: center;
    }
    .left_2{
      width: 70%;
      height: 100%;
      border: 1px solid red;
    }
    .table-header1{
      width: 100%;
      height: 40px;
    }
    .table-header1-items{
      width:150px;
      height: 100%;
    }
    .table-body1{
      width: 100%;
      height: 40px;
    }
    .details_line{
      width: 100%;
      height: 1px;
      margin: 4px;
    }
    .faqiren-touxiang{
      width: 49px;
      height: 49px;
      position: relative;
    }
    .faqiren-touxiang-right{
      width: 100%;
      height: 49px;
      margin-left: 20px;
      display: flex;
      flex-direction: row;
      text-align: center;
    }
    .width100{
      width: 100% !important;
    }
   
    .faqiren-touxiang-right1{
      width: 30%;
      text-align: left;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      /* line-height: 49px; */
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .widthpercent30{
      width: 40%;
    }
    .faqiren-touxiang-right2{
      margin-left: auto;
      width: 140px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      /* line-height: 49px; */
      text-align: center;
      font-size: 14px;
      color: #999999;
    }
    .faqiren-touxiang1{
      width: 40px;
      height: 40px;
      border-radius: 4px;
    }
    .faqiren-touxiang1 > img{
      width: 100%;
      height: 100%;
      border-radius: 4px;
    }
    .faqiren-touxiang2 > img{
      width: 100%;
      height: 100%;
    }

    .faqiren-touxiang2{
      width: 18px;
      height: 18px;
      position: absolute;
      left: 31px;
      top: 31px;
    }
    .margintop70{
      margin-top: 70px!important;
    }
    .height100{
      height: 100px!important;
    }
    .margintop40{
      margin-top: 40px!important;
    }
    .flex_11{
      display: flex;
      flex-direction: row;
      justify-content: space-around
    }
    .refuse11{
      flex: 1;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #0063f5;
      /* line-height: 50px; */
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
    }
    .refuse111{
      flex: 1;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FD513B;
      /* line-height: 50px; */
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
    }
    .agree11{
      flex: 1;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #10A300;
      /* line-height: 49px; */
    }
    .visibility{
      visibility: hidden;
    }
    .approval-items{
      width: 100%;
    }
    .approval-items1{
      width: 100%;
      display: flex;
      flex-direction: row;
    }
    .approval-items2{
      margin: 10px 0;
      margin-left: 20.5px;
      border-left: 1px dashed #BFC0C7;
    }
    .approval-items3{
      height: 52px;
      background: #F3F4F6;
      margin-left: 44.5px;
      margin-bottom: 6px;
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .approval-items3:last-child{
      margin-bottom: 0;
    }
    .approval-items4{
      width: 60px;
      height: 80px;
      /* margin-left: 20px; */
      margin: 8px;
    }
    .approval-items4:first-child{
      margin-left: 0;
    }
    .approval-items4-1{
      width: 40px;
      height: 40px;
      margin: 0 auto;
    }
    .approval-items4-1 > img{
      width: 100%;
      height: 100%;
      border-radius: 4px;
    }
    .approval-items4-2{
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 2em;
      text-align: center;
    }
    .marginlef60{
      margin-left: 60px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: wrap;
      border: none!important;
    }
    .marginlef601{
      margin-left: 60px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: wrap;
      margin-left: 20px;
    }
    .withheight36{
      width: 36px;
      height: 36px;
      margin-left: 9px;
    }
    .withheight36 > img{
      width: 100%;
      height: 100%;
    }
    .withheight12{
      width: 65%;
      height: 36px;
      margin-left: 10px;
    }
    .withheight121{
      width: 100%;
      height: 20px;
      line-height: 20px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #444444;
      line-height: 20px;
    }
    .withheight122{
      width: 100%;
      height: 16px;
      line-height: 16px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 16px;
    }
    .approval-items11{
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 20px;
      margin-left: 67px;
      /* padding: 4px 8px; */
      background: #F3F4F6;
    }
    .withheight11{
      width: 20%;
      height: 36px;
      margin-left: 10px;
      text-align: center;
      line-height: 36px;
    }
    .margintop36{
      margin-top: 36px;
      margin-bottom: 36px;
    }
    .height60{
      height: 40px;
    }
    .margintop60{
      margin-top: -60px;
    }
    .detail-value{
      font-size: 16px;
      font-weight: 400;
      color: #333333;
      
    }
    .detail-value-box{
      margin-bottom: 10px;
    }
    .flex_121{
      display: flex;
      flex-direction: row;
    }
    .approval-status-watermark{
      width: 128px;
      height: 128px;
      position: absolute;
      top: 0;
      right: 95px;
      border-radius: 8px;
    }
    .approval-status-watermark>img{
      width: 100%;
      height: 100%;
    }
    .color-black{
      color: #333333;
      margin-left: 12px;
    }
    .color-black1{
      color: #333333;
    }
    .approval-provessing{
      width: 16px!important;
      height: 16px!important;
      position: relative;
      top: -12px;
      left: 31px;
      
    }
    .el-drawer-no-data{
      width: 100%;
      height: 400px;
      text-align: center;
    }
    .el-drawer-no-data::after{
      content: '';
      display: inline-block;
      height: 100%;
      width: 1px;
      vertical-align: middle;
    }
    .el-drawer-no-data>img{
      vertical-align: middle;
    }
    .approval-people{
      height: 60px;
      margin-left: 44.5px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: wrap;
    }
    .approval-people-items{
      width: 40px;
      height: 60px;
      margin-left: 12px;
    }
    .approval-people-items:first-child{
      margin-left: 0;
    }
    .approval-people-items-top{
      width: 40px;
      height: 40px;
      border-radius: 4px;
    }
    .approval-people-items-top > img{
      width: 100%;
      height: 100%;
      border-radius: 4px;
    }
    .approval-people-items-bottom{
      width: 40px;
      height: 20px;
      font-size: 12px;
      margin-top: 6px;
      color: #999999;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
    }
    .search-title-duration{
      width:220px;
      height: 36px;
    }
    .search-title{
        font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 36px;
    }
    .pass1{
      height: 19px;
      position: relative;
      left: 6px;
      top: 3px;
    }
    .approval-code{
      height: 28px;
      margin: 0 40px;
      display: flex;
      flex-direction: row;
    }
    .approval-code-left,.approval-code-right{
      width: 50%;
      height: 100%;
    }
    .approval-code-left{
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 28px;
    }
    .approval-code-right{
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
    }
    .prints,.dayin{
      width: 55px;
      height: 28px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 28px;
      display: flex;
      flex-direction: row;
    }
    .prints:hover,.dayin:hover{
      cursor: pointer;
    }
    .dayin{
      margin-left: 24px;
    }
    .dayin-1{
      width: 28px;
      height: 28px;
      position: relative;
    }
    .dayin-1::after{
      content: "";
      display: inline-block;
      height: 100%;
      width: 1px;
      vertical-align: middle;
    }
    .dayin-1 > img{
      width: 60%;
      vertical-align: middle;
    }
    
</style>